/* http://code.google.com/p/slide-show-hide/ */
/*
 *	example for $("#slide").slideShowHide();
 *	
 * 	<div id="slide">
 *		<ul>
 *			<li><img src="imgs/1.jpg" /></li>
 *			<li><img src="imgs/2.jpg" /></li>
 *			<li><img src="imgs/3.jpg" /></li>
 *			<li><img src="imgs/4.jpg" /></li>
 *			<li><img src="imgs/5.jpg" /></li>
 *		</ul>
 *	</div>
 *
 */
 
;(function($) {
 
    $.slideShowHide = function(element, options) {
 
        // plugin's default options
        // this is private property and is  accessible only from inside the plugin
        var defaults = {
            pause : 2000,
            speed : 500,
            width: 0,
            height: 0,
            classListSlide : 'list_slide',
            classButtons : 'buttons',
            showNumbers : true,
            onStart : null,
            onComplete : null
        }
 
        var plugin = this;
        
        var sliding = true;
        
        var clicking = false;
        
        var cursor = 0;
        
        var qty_elements = 0;
        
        var timeout = 0;
        
        var debug = true;
 
        plugin.settings = {}
 
        // reference to the jQuery version of DOM element the plugin is attached to
        var $element = $(element),
             element = element;    // reference to the actual DOM element
        
        var list_slide, list_buttons;
 
        plugin.init = function() {
			
			var buttons = '';
			var width = 0, height = 0;
            
            plugin.settings = $.extend({}, defaults, options)
            
            list_slide = $element.children('ul:first');
            
            list_slide.children('li').fadeTo('fast', 0);
            
            list_slide.addClass(plugin.settings.classListSlide);
            
            if(plugin.settings.width==0 || plugin.settings.height==0) {
				list_slide.children('li').each(function(key, value) {
					
					if(plugin.settings.width==0) {
						if($(this).width()>width) width = $(this).width();
					}
					
					if(plugin.settings.height==0) {
						if($(this).height()>height) height = $(this).height();
					}
					
				});
			} else {
				width = plugin.settings.width;
				height = plugin.settings.height;
			}
			
			list_slide.css({
				'overflow' : 'hidden',
				'width' : width + 'px',
				'height' : height + 'px'
			});
			
			list_slide.children('li').css({
				'position' : 'absolute',
				'overflow' : 'hidden',
				'width' : width + 'px',
				'height' : height + 'px'
			});
            
            qty_elements = list_slide.children('li').length;
            
            if(qty_elements>1) {
				
				if (plugin.settings.showNumbers) {
					
					buttons += '<ul class="' + plugin.settings.classButtons + '">';
					list_slide.children('li').each(function(key, value) {
						
						if(key>0) $(this).hide();
						
						buttons += '<li><a href="#">' + (key+1) + '</a></li>';
					});
					buttons += '</ul>';
				
					$element.append(buttons);
					
					list_buttons = $('ul.' + plugin.settings.classButtons, $element);
					
					$(list_buttons.children('li').get(0)).addClass("selected");
					
					$('a', $element.children('ul.' + plugin.settings.classButtons)).click(function(e) {
						
						e.preventDefault();
						
						var idx = $(this).parent().index();
						
						if(!clicking) {
							clicking = true;
							
							if(sliding) {
								print_debug('Stopping timeout');
								clearTimeout(timeout);
								sliding = false;
							}
							
							if(cursor != idx) {
								swap(idx);
							} else {
								show(idx);
							}
						}
					});
				}
				
				//list_slide.children('li').not(':eq(0)').fadeTo(0);
				show(0);
				
				start_timer();
			} else {
				show(0);
			}
		}
 
        var show = function(idx) {
			$($('li', list_slide).get(idx)).fadeTo(plugin.settings.speed, 1);
        }
        
        //hide img[cursor], show img[idx], update cursor with idx.
        var swap = function(idx) {
			
			print_debug('start swap');
			
			if(list_buttons) {
				$('.selected', list_buttons).removeClass('selected');
			
				$(list_buttons.children('li').get(idx)).addClass('selected');
			}
			
			if(typeof(plugin.settings.onStart) == 'function') {
				plugin.settings.onStart(idx);
			}
			
			show(idx);
			
			if(typeof(plugin.settings.onComplete) == 'function') {
				plugin.settings.onComplete(idx);
			}
			
			$($('li', list_slide).get(cursor)).fadeTo(plugin.settings.speed, 0, function() {
				cursor = idx;
				print_debug('setting timeout to ' + plugin.settings.pause);
				
				clicking = false;
				
				start_timer();
			});
			
		}
		
		var start_timer = function() {
			timeout = setTimeout(function() {
				executeSlide();
			}, plugin.settings.pause);
		}
		
		var executeSlide = function () {
			
			print_debug('executeSlide');
			
			if(sliding) {
				swap((cursor + 1) % qty_elements);
			}
		}
		
		var print_debug = function (msg) {
			if(debug) {
				console.log('Debug: ' + msg);
			}
		}
 
        // fire up the plugin!
        // call the "constructor" method
        plugin.init();
 
    }
 
    // add the plugin to the jQuery.fn object
    $.fn.slideShowHide = function(options) {
 
        // iterate through the DOM elements we are attaching the plugin to
        return this.each(function() {
 
            // if plugin has not already been attached to the element
            if (undefined == $(this).data('slideShowHide')) {
 
                // create a new instance of the plugin
                // pass the DOM element and the user-provided options as arguments
                var plugin = new $.slideShowHide(this, options);
 
                // in the jQuery version of the element
                // store a reference to the plugin object
                // you can later access the plugin and its methods and properties like
                // element.data('pluginName').publicMethod(arg1, arg2, ... argn) or
                // element.data('pluginName').settings.propertyName
                $(this).data('slideShowHide', plugin);
 
            }
 
        });
 
    }
 
})(jQuery);

